import React, { useCallback, useEffect, useState } from 'react';
import PageHeader from '@/components/page/PageHeader';
import DataTable from '@/components/base/DataTable';
import DataEdit from '@/components/base/DataEdit';
import { Select, Switch, Space, Col, Row, Card, Table } from 'antd';
import SearchInputPro from '@/components/base/SearchInputPro';
import {
  GetSjcjzt,
  SetSjcjzt,
  SaveZhtCzr,
  SaveJydwCzr,
  AddZhtCzzt,
  fetch,
  AddJydwCzzt,
  SaveFxglCzr,
  AddFxglCzzt,
} from '@/services/commCRUD';
import { useModel } from 'umi';
const daoName = 'ShJhcwDcSetJD';
const daoName2 = 'ShJhcwDcSetZHT';
const daoName3 = 'ShJhcwDcSetJYDW';
const daoName4 = 'ShJhcwDcSetFXGL';
const columns: API.Column[] = [
  {
    title: '年份',
    width: 150,
    sorter: true,
    key: 'NIAN',
    dataIndex: 'NIAN',
    dispaly: false,
    filter: true,
    export: true,
  },
  {
    title: '季度',
    width: 150,
    sorter: true,
    key: 'JIDU',
    dataIndex: 'JIDU',
    dispaly: false,
    filter: true,
    export: true,
  },
  {
    title: '状态',
    width: 150,
    sorter: true,
    key: 'STATE',
    dataIndex: 'STATE',
    dispaly: false,
    filter: true,
    export: true,
  },
];
const controls: API.Control[] = [
  { name: 'NIAN', label: '年份', type: 'number', grid: 12 / 24 },
  { name: 'JIDU', type: 'number', label: '季度', grid: 12 / 24 },
  { name: 'STATE', type: 'number', label: '状态', grid: 12 / 24 },
];

const ShJhcwDcSetZHT: React.FC = () => {
  const [BMIDS, setBMIDS] = useState<Record<number, any>>();
  const [ZBIDS, setZBIDS] = useState<Record<number, any>>();
  const [listData, setListData] = useState<Record<string, any>[]>();
  const [load, setLoading] = useState<boolean>();
  const renderZhtCzr = (rowData: any) => {
    return (
      <div style={{ marginTop: 0, marginBottom: -23 }}>
        <SearchInputPro
          value={rowData.CZR}
          label={''}
          name={''}
          hasAll={false}
          fetch={{
            tableName: 'User',
            searchColumns: ['No', 'Name'],
            optionTpl: 'Name',
            valueTpl: 'ID',
            isDao: true,
          }}
          onSelect={(data) => SaveZhtCzr(data.ID, rowData.BMID)}
        />
      </div>
    );
  };
  const renderZhtczzt = (rowData: Record<string, any>) => {
    if (BMIDS && rowData.BMID && BMIDS[rowData.BMID] === 1) {
      return '是';
    }
    return '否';
  };
  const columns2: API.Column[] = [
    {
      title: '部门名称',
      width: 150,
      sorter: true,
      key: 'BMMC',
      dataIndex: 'BMMC',
      dispaly: true,
      filter: true,
      export: true,
    },
    {
      title: '操作人',
      width: 160,
      sorter: true,
      key: 'CZR',
      render: (rowData: Record<string, any>) => renderZhtCzr(rowData),
      dispaly: true,
      filter: true,
      export: true,
    },
    {
      title: '是否操作',
      width: 160,
      sorter: true,
      key: 'ISCZ',
      render: (rowData: any) => renderZhtczzt(rowData),
      dispaly: true,
      filter: true,
      export: true,
    },
  ];
  const renderJydwCzr = (rowData: any) => {
    return (
      <div style={{ marginTop: 0, marginBottom: -23 }}>
        <SearchInputPro
          value={rowData.CZR}
          label={''}
          name={''}
          hasAll={false}
          fetch={{
            tableName: 'User',
            searchColumns: ['No', 'Name'],
            optionTpl: 'Name',
            valueTpl: 'ID',
            isDao: true,
          }}
          onSelect={(data) => SaveJydwCzr(data.ID, rowData.ZBID)}
        />
      </div>
    );
  };
  const renderJydwczzt = (rowData: Record<string, any>) => {
    if (ZBIDS && rowData.ZBID && ZBIDS[rowData.ZBID] === 1) {
      return '是';
    }
    return '否';
  };
  const columns3: API.Column[] = [
    {
      title: '指标名称',
      width: 200,
      sorter: true,
      key: 'ZBMC',
      dataIndex: 'ZBMC',
      dispaly: true,
      filter: true,
      export: true,
    },
    {
      title: '部门名称',
      width: 150,
      sorter: true,
      key: 'BMMC',
      dataIndex: 'BMMC',
      dispaly: true,
      filter: true,
      export: true,
    },
    {
      title: '是否打分',
      width: 150,
      sorter: true,
      key: 'ISDF',
      dataIndex: 'ISDF',
      render: (ISDF: any) => {
        if (ISDF === 1) {
          return '是';
        } else {
          return '否';
        }
      },
      dispaly: true,
      filter: true,
      export: true,
    },
    {
      title: '操作人',
      width: 160,
      sorter: true,
      key: 'CZR',
      render: (rowData: Record<string, any>) => renderJydwCzr(rowData),
      dispaly: true,
      filter: true,
      export: true,
    },
    {
      title: '是否操作',
      width: 160,
      sorter: true,
      key: 'ISCZ',
      render: (rowData: any) => renderJydwczzt(rowData),
      dispaly: true,
      filter: true,
      export: true,
    },
  ];
  const renderFxgkCzr = (rowData: any) => {
    return (
      <div style={{ marginTop: 0, marginBottom: -23 }}>
        <SearchInputPro
          value={rowData.CZR}
          label={''}
          name={''}
          hasAll={false}
          fetch={{
            tableName: 'User',
            searchColumns: ['No', 'Name'],
            optionTpl: 'Name',
            valueTpl: 'ID',
            isDao: true,
          }}
          onSelect={(data) => SaveFxglCzr(data.ID, rowData.BMID)}
        />
      </div>
    );
  };
  const renderFxgkczzt = (rowData: Record<string, any>) => {
    if (BMIDS && rowData.BMID && BMIDS[rowData.BMID] === 1) {
      return '是';
    }
    return '否';
  };
  const columns4: API.Column[] = [
    {
      title: '部门名称',
      width: 150,
      sorter: true,
      key: 'BMMC',
      dataIndex: 'BMMC',
      dispaly: true,
      filter: true,
      export: true,
    },
    {
      title: '操作人',
      width: 160,
      sorter: true,
      key: 'CZR',
      render: (rowData: Record<string, any>) => renderFxgkCzr(rowData),
      dispaly: true,
      filter: true,
      export: true,
    },
    {
      title: '是否操作',
      width: 160,
      sorter: true,
      key: 'ISCZ',
      render: (rowData: any) => renderFxgkczzt(rowData),
      dispaly: true,
      filter: true,
      export: true,
    },
  ];
  const options: API.OptionItem[] = [];
  const year = new Date();
  const dqyear = year.getFullYear();
  for (let i = dqyear; i >= dqyear - 4; i--) {
    options.push({ label: `${i}年`, value: i });
  }
  const currMonth = new Date().getMonth() + 1;
  const currQuarter = Math.floor(currMonth % 3 == 0 ? currMonth / 3 : currMonth / 3 + 1);
  const options2: API.OptionItem[] = [
    { label: '一季度', value: 1 },
    { label: '二季度', value: 2 },
    { label: '三季度', value: 3 },
    { label: '四季度', value: 4 },
  ];
  const [NF, setNF] = useState<number>(year.getFullYear());
  const [JD, setJD] = useState<number>(currQuarter);
  const [ZT, setZT] = useState<boolean>(false);
  const { bodyHeight } = useModel('sysInfo');
  const loadZt = (nf: number, jd: number) => {
    GetSjcjzt(nf, jd).then((result: boolean) => {
      setZT(result);
    });
  };
  const handleChangeNian = (value: number) => {
    setNF(value);
    loadZt(value, JD);
  };
  const handleChangeJd = (value: number) => {
    setJD(value);
    loadZt(NF, value);
  };
  const handleChangeZt = (zt: boolean) => {
    SetSjcjzt(NF, JD, zt).then(() => {
      setZT(zt);
    });
  };
  const loadData = useCallback(() => {
    setLoading(true);
    const order: API.OrderItem = {
      FieldName: 'BMID',
      Direction: 'ASC',
    };
    fetch(daoName2, 1, 50, [order], [], 0)
      .then(function (data) {
        setListData(data.Objectlist);
      })
      .catch(function (ex) {
        console.error('请求', daoName2, '错误', ex);
      })
      .finally(function () {
        setLoading(false);
      });
  }, []);
  useEffect(() => {
    loadZt(NF, JD);
    AddZhtCzzt(NF, JD).then((result: Record<number, any>) => {
      setBMIDS(result);
    });
    loadData();
  }, [JD, NF, loadData]);

  const [listData2, setListData2] = useState<Record<string, any>[]>();
  const [load2, setLoading2] = useState<boolean>();
  const loadData2 = useCallback(() => {
    setLoading2(true);
    const order: API.OrderItem = {
      FieldName: 'BMID',
      Direction: 'ASC',
    };
    fetch(daoName3, 1, 50, [order], [], 0)
      .then(function (data) {
        setListData2(data.Objectlist);
      })
      .catch(function (ex) {
        console.error('请求', daoName2, '错误', ex);
      })
      .finally(function () {
        setLoading2(false);
      });
  }, []);
  useEffect(() => {
    AddJydwCzzt(NF, JD).then((result: Record<number, any>) => {
      setZBIDS(result);
    });
    loadData2();
  }, [JD, NF, loadData2]);

  const [listData3, setListData3] = useState<Record<string, any>[]>();
  const [load3, setLoading3] = useState<boolean>();
  const loadData3 = useCallback(() => {
    setLoading3(true);
    const order: API.OrderItem = {
      FieldName: 'BMID',
      Direction: 'ASC',
    };
    fetch(daoName4, 1, 50, [order], [], 0)
      .then(function (data) {
        setListData3(data.Objectlist);
      })
      .catch(function (ex) {
        console.error('请求', daoName2, '错误', ex);
      })
      .finally(function () {
        setLoading3(false);
      });
  }, []);
  useEffect(() => {
    loadZt(NF, JD);
    AddFxglCzzt(NF, JD).then((result: Record<number, any>) => {
      setBMIDS(result);
    });
    loadData3();
  }, [JD, NF, loadData3]);

  return (
    <PageHeader>
      <div style={{ marginTop: -8, marginBottom: 5 }}>
        <DataEdit
          showType="inner"
          layout="vertical"
          renderButtons={(p) => {
            return [
              <>
                <h4 style={{ marginTop: 8, marginBottom: 5 }}>年份:</h4>
                <Select
                  value={NF}
                  onChange={handleChangeNian}
                  options={options}
                  key="submit"
                  onClick={() => p.form?.submit?.()}
                />
              </>,
              <>
                <h4 style={{ marginTop: 8, marginBottom: 5 }}>季度:</h4>
                <Select
                  value={JD}
                  onChange={handleChangeJd}
                  options={options2}
                  key="submit"
                  onClick={() => p.form?.submit?.()}
                />
              </>,
              <Space direction="vertical" key="submit">
                <Switch
                  checkedChildren="开启"
                  unCheckedChildren="关闭"
                  checked={ZT}
                  onChange={handleChangeZt}
                />
              </Space>,
            ];
          }}
          controls={[]}
        />
      </div>
      <DataTable
        daoName={daoName}
        columns={columns}
        controls={controls}
        keyColName={'NIAN'}
        pageSize={20}
        canPage={false}
        canPageSize={false}
        canSelectItems={false}
        canClearFilter={false}
      />
      <div>
        <Row>
          <Col span={10} style={{ paddingRight: 15 }}>
            <Card title="中后台和直营团队打分" bordered={false} bodyStyle={{ padding: 0 }}>
              <div style={{ height: 490, overflow: 'auto' }}>
                <Table
                  columns={columns2}
                  dataSource={listData}
                  loading={load}
                  rowKey={(record) => record.BMID}
                  bordered={true}
                  pagination={false}
                  size="small"
                  scroll={{ y: 450 }}
                />
              </div>
            </Card>
            <Card title="风险管控类中后台打分" bordered={false} bodyStyle={{ padding: 0 }}>
              <div style={{ height: bodyHeight - 690, overflow: 'auto' }}>
                <Table
                  columns={columns4}
                  dataSource={listData3}
                  loading={load3}
                  rowKey={(record) => record.BMID}
                  bordered={true}
                  pagination={false}
                  size="small"
                  scroll={{ y: 200 }}
                />
              </div>
            </Card>
          </Col>
          <Col span={14} style={{ paddingRight: 15 }} title="经营单位">
            <Card title="经营单位指标完成情况" bordered={false} bodyStyle={{ padding: 10 }}>
              <div style={{ height: bodyHeight - 200, overflow: 'hidden' }}>
                <Table
                  columns={columns3}
                  dataSource={listData2}
                  loading={load2}
                  rowKey={(record) => record.ZBID}
                  bordered={true}
                  pagination={false}
                  size="small"
                  scroll={{ y: bodyHeight - 240 }}
                />
              </div>
            </Card>
          </Col>
        </Row>
      </div>
    </PageHeader>
  );
};
export default ShJhcwDcSetZHT;
